<template>
  <PageTable
    :search-options="options"
    :columns="columns.filter((item) => item?.checked)"
    :data-source="sourceData"
    :loading="spinning"
    :row-selection="{ selectedRowKeys, onChange: setSelectedRowKeys }"
    :pagination="{
      current: pagination.pageNum,
      pageSize: pagination.pageSize,
      total: pagination.total,
      onChange: onPageChange
    }"
    @search="onSearchData"
  >
    <template #searchCollapse>
      <AForm layout="inline" ref="formRef" :model="formState" @finish="onSearchData" @reset="onReset">
        <AFormItem label="字典名称" name="dictName">
          <AInput v-model:value="formState.dictName" placeholder="请输入字典名称"></AInput>
        </AFormItem>
        <AFormItem label="字典类型" name="dictType">
          <AInput v-model:value="formState.dictType" placeholder="请输入字典类型"></AInput>
        </AFormItem>
        <AFormItem>
          <ASpace>
            <AButton html-type="reset">重置</AButton>
            <AButton type="primary" html-type="submit">搜索</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </template>
    <template #operate>
      <ASpace>
        <AButton type="primary" ghost :icon="createVNode(PlusOutlined)" @click="() => setOpenAddModal(true)"
          >添加
        </AButton>
        <APopconfirm
          title="您确定批量删除数据吗?"
          ok-text="是"
          cancel-text="否"
          @confirm="() => onDelete(selectedRowKeys)"
        >
          <AButton danger ghost :icon="createVNode(DeleteOutlined)" :disabled="!selectedRowKeys.length">删除</AButton>
        </APopconfirm>
      </ASpace>
      <ASpace>
        <ATooltip title="刷新列表">
          <AButton :icon="createVNode(ReloadOutlined)" :disabled="!!timer" @click="onRefreshData">
            {{ timer || '' }}
          </AButton>
        </ATooltip>
        <ATooltip title="导出字典">
          <RouterLink to="/system/user/export">
            <AButton :icon="createVNode(ExportOutlined)"></AButton>
          </RouterLink>
        </ATooltip>
        <RDropdownCheckbox
          placement="bottomRight"
          v-model:value="columns"
          :fieldNames="{ label: 'title', value: 'key', checked: 'checked' }"
        >
          <AButton :icon="createVNode(AppstoreOutlined)"></AButton>
        </RDropdownCheckbox>
      </ASpace>
    </template>
    <template #bodyCell="{ column, record }">
      <AButton v-if="column?.key === 'dictName'" type="link" size="small" @click="() => onOpenDataModal(record)">
        {{ record[column?.key] }}
      </AButton>
    </template>
    <template #bodyActionCell="{ record }">
      <AButton type="link" size="small" :icon="createVNode(EditOutlined)" @click="() => onOpenEditModal(record)">
        编辑
      </AButton>
      <APopconfirm title="您确定删除该数据吗?" ok-text="是" cancel-text="否" @confirm="() => onDelete([record.dictId])">
        <AButton type="link" danger size="small" :icon="createVNode(DeleteOutlined)">删除</AButton>
      </APopconfirm>
    </template>
  </PageTable>
  <AddDict :open="openAddModal" @finish="onAddDict" @cancel="() => setOpenAddModal(false)"></AddDict>
  <EditDict
    :dictId="dictData?.dictId"
    :open="openEditModal"
    @finish="onEditDict"
    @cancel="() => setOpenEditModal(false)"
  ></EditDict>
  <DictData :dict="dictData" :open="openDataModal" @close="onCloseDataModal" />
</template>

<script setup>
import { createVNode, ref, reactive, toValue, onBeforeMount } from 'vue';
import { AddDict, EditDict, DictData } from './modules';
import { PageTable } from '@/components/templates';
import { RDropdownCheckbox } from '@/components/custom';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ExportOutlined,
  AppstoreOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue';

import { useState, useFetchPageData } from '@/hooks';
import { fetchGetDictList, fetchAddDict, fetchUpdateDict, fetchDeleteDict } from '@/api/system/dict';

const options = [
  { label: '综合搜索', value: 'keyword', placeholder: '综合搜索' },
  { label: '字典名称', value: 'dictName', placeholder: '请输入字典名称' }
];

const defaultColumns = [
  { key: 'index', title: '序号', dataIndex: 'index', checked: true },
  { key: 'dictName', title: '字典名称', dataIndex: 'dictName', checked: true },
  { key: 'dictType', title: '字典类型', dataIndex: 'dictType', checked: true },
  { key: 'statusName', title: '状态名称', dataIndex: 'statusName', checked: true },
  { key: 'createTime', title: '创建时间', dataIndex: 'createTime', checked: true },
  { key: 'action', title: '操作', checked: true }
];
const initValues = { dictName: '', dictType: '', remark: '' };
const columns = ref(defaultColumns);
const formRef = ref();
const formState = reactive(initValues);
const [openAddModal, setOpenAddModal] = useState(false);
const [dictData, setDictData] = useState(null);
const [openEditModal, setOpenEditModal] = useState(false);
const [openDataModal, setOpenDataModal] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const {
  sourceData,
  spinning: spinning,
  pagination,
  timer,
  onFetchData,
  onSearchData,
  onPageChange,
  onResetData,
  onRefreshData
} = useFetchPageData(fetchGetDictList);

onBeforeMount(() => {
  onFetchData();
});

const onReset = () => {
  onResetData();
  toValue(formRef).resetFields();
};

const onOpenEditModal = (record) => {
  setDictData(record);
  setOpenEditModal(true);
};

const onOpenDataModal = (record) => {
  setDictData(record);
  setOpenDataModal(true);
};

const onCloseDataModal = () => {
  setOpenDataModal(false);
  setDictData(null);
};

const onAddDict = async (values) => {
  await fetchAddDict(values);
  setOpenAddModal(false);
  onRefreshData(true);
};

const onEditDict = async (values) => {
  await fetchUpdateDict(values);
  setOpenEditModal(false);
  setDictData(null);
  onRefreshData(true);
};

const onDelete = async (values) => {
  await fetchDeleteDict(values);
  onRefreshData(true);
};
</script>

<style lang="scss" scoped></style>
